import React, { Component } from 'react'

export default class Form extends Component {
  state = {
    username: '',
    password: '',
    city: '',
    isAgree: false,
    hobby: [],
    sex: '',
    file: '',
  }
  handle = (e) => {
    this.setState({
      username: e.target.value,
    })
  }
  pswHandle = (e) => {
    this.setState({
      password: e.target.value,
    })
  }
  selHandle = (e) => {
    this.setState({
      city: e.target.value,
    })
  }
  sCHandle = (e) => {
    this.setState({
      isAgree: e.target.checked,
    })
  }

  rHandle = (e) => {
    this.setState({
      sex: e.target.value,
    })
  }

  fHandle = (e) => {
    this.setState({
      file: e.target.files[0],
    })
  }

  mCHandle = (e) => {
    // console.log(e.target.value)
    // 1. 获取value值
    const value = e.target.value
    // 2. 判断hobby数组中是否有这个值,有则删除,无则添加
    const index = this.state.hobby.indexOf(value)
    if (index > -1) {
      this.state.hobby.splice(index, 1)
    } else {
      this.state.hobby.push(value)
    }
    this.setState({
      hobby: this.state.hobby,
    })
  }
  render() {
    return (
      <div>
        Form
        <form>
          用户名:
          <input
            type="text"
            value={this.state.username}
            onChange={this.handle}
          />
          <br />
          密码:
          <input
            type="password"
            value={this.state.password}
            onChange={this.pswHandle}
          />
          <br />
          选择城市:
          <select
            name=""
            id=""
            value={this.state.city}
            onChange={this.selHandle}
          >
            <option value="bj">北京</option>
            <option value="sz">深圳</option>
            <option value="sh">上海</option>
            <option value="tj">天津</option>
          </select>
          <br />
          是否同意:{' '}
          <input
            type="checkbox"
            checked={this.state.isAgree}
            onChange={this.sCHandle}
          />
          <br />
          爱好:
          <br />
          抽烟:
          <input type="checkbox" value="smoking" onChange={this.mCHandle} />
          喝酒:
          <input type="checkbox" value="drinking" onChange={this.mCHandle} />
          找富婆:
          <input type="checkbox" value="findMoney" onChange={this.mCHandle} />
          <br />
          性别:
          <br />
          男:{' '}
          <input type="radio" name="sex" value="male" onChange={this.rHandle} />
          女:{' '}
          <input
            type="radio"
            name="sex"
            value="female"
            onChange={this.rHandle}
          />
          <br />
          文件:
          <input type="file" onChange={this.fHandle} files={this.state.file} />
        </form>
      </div>
    )
  }
}
